<template>
    <div class="introduce">
        <div class="title">
            <!-- <div>安徽口子酒业股份有限公司</div> -->
            <div>文件学习墙</div>
        </div>
        <div class="image-wrapper" ref="list">
            <div class="item" v-for="(item,index) in imgs" :key="index">
                <img :src="item.src" />
            </div>
        </div>
    </div>
</template>

<script>
import {getQRCodes,fileUrl} from '../../api/server';
import _ from 'lodash';
export default {
    name:"Introduce",
    data(){
        return {
           imgs:[],
           page:{
             pageSize:10,
             pageNum:1
           },
           total:0,
           timeId:-1
        }
    },
    watch:{
      '$store.state.factoryId':function(newVal,oldVal){
        if(this.timeId>0){
          clearInterval(this.timeId);
        }
        if(newVal==null) return;
        this.imgs=[];
        this.getCodeData();
        this.timeId=setInterval(() =>{
          this.imgs=[];
          this.getCodeData();
        },15000)
      }
    },
    created(){
    },
    mounted(){
      this.$refs['list'].onscroll=_.throttle(this.onListScroll,1000);
    },
    methods:{
      onListScroll(e){
        if(e.target.scrollHeight-e.target.scrollTop<e.target.clientHeight+20){
          this.page.pageNum++;
          this.getCodeData();
        }
        
      },
      getCodeData(){
        const factoryId=this.$store.getters["getFactoryId"];
        if(this.total>0&&this.page.pageSize*(this.page.pageNum-1)>this.total) return;
        getQRCodes({
          codeType:"study",
          factoryId,
          ...this.page
        }).then(data =>{
          this.total=data.total;
          data.records.map(item =>{
            this.imgs.push({
              src:fileUrl(item.qrCode)
            });
          })
        })
      }
    }
}
</script>

<style lang="scss" scoped>
.introduce{
    width: 100%;
    height: 100%;
    .title{
        height: 10%;
        font-size: 18px;
        align-self: flex-start;
    }
    .image-wrapper{
        height: 80%;
        display: flex;
        justify-content: flex-start;
        flex-flow: row wrap;
        overflow-y: scroll;
        margin: 10px;
        .item{
            flex: 0 0 25%;
            height: 50%;
            img{
                width: 150px;
                height: 150px;
            }
        }
    }
    .footer{
        height: 10%;
        display: flex;
        justify-content: center;
        align-items: center;
    }
}
</style>